{{extend './main.html'}}
{{block 'tologin'}}
<div class="container">
    <a href="/" class="btn btn-sm btn-default" ><</a>
    <form id="form" action="" enctype="multipart/form-data">
        <input type="hidden"  name="uid" value={{user.uid}}>
        <div class="form-group">
            <label for="">歌曲编号</label>
            <input type="text" name="id" class="form-control" placeholder="请输入歌曲编号">
        </div>
        <div class="form-group">
            <label for="">歌曲标题</label>
            <input type="text" name="title" class="form-control" placeholder="请输入歌曲标题">
        </div>
        <div class="form-group">
            <label for="">歌曲时长</label>
            <input type="text" name="time" class="form-control" placeholder="请输入歌曲时长">
        </div>
        <div class="form-group">
            <label for="">歌手</label>
            <input type="text" name="singer" class="form-control" placeholder="请输入歌手姓名">
        </div>
        <div class="form-group">
            <label for="">歌曲文件</label>
            <input type="file" name="file">
            <p class="help-block">请上传歌曲文件.</p>
        </div>
        <div class="form-group">
            <label for="">歌词文件</label>
            <input type="file" name="lrc">
            <p class="help-block">请上传歌词.</p>
        </div>
        <button type="button" id="postmusic" class="btn btn-success">点击添加</button>
    </form>

</div>
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center">
                <h5>添加成功</h5>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" onclick="$('#myModal').modal('hide');">确认</button>
            </div>
        </div>
    </div>
</div>
<script>
    $('#postmusic').click(function () {
        //如果ajax异步提交中没有上传文件，用表单序列化 $('#form').serialize()
        //如表单要上传文件，ajax必须用new FormData对象上传，也要设置属性async、processData、contentType: false,
        var fData=new FormData($('#form')[0])  //$('#form')用id获取jquery也会返回一个数组
        $.ajax({
            type: 'POST',
            url: '/addmusic',
            data: fData,
            async: false,   //DOM不能异步操作，跟submit同步提交一样，只是不会跳转页面
            processData: false, // 使数据不做处理
            contentType: false, // 由于上传是一个对象，非字符串，不要设置Content-Type请求头
            success: function (data) {
                if (data.code !== '001') {
                    console.dir(data);
                    throw('添加数据出错');
                }
                $('#myModal').modal('show').find('h5').text(data.msg);
                $('input:text').each(function () {
                    $(this).val('')
                })
                $('input:file').each(function () {
                    $(this).val('')
                })
            }
        });

    })
</script>
{{/block}}
